<template>
  <div class="searchResult">
    <!-- 导航栏 start -->
    <van-nav-bar :title="title" z-index="9999" right-text="" @click-left="onClickLeft" @click-right="onClickRight" left-arrow fixed />
    <!-- 导航栏 end -->
    <!-- 搜索、筛选栏 start -->
    <van-sticky :offset-top="46">
      <!-- 搜索 -->
      <van-search v-model="filter_kw" shape="round" placeholder="请输入搜索关键词" @search="resetQuery" />
      <!-- 下拉 -->
      <van-dropdown-menu active-color="#f70">
        <!-- 地区 -->
        <van-dropdown-item title="地区" ref="item_area">
          <div class="area">
            <!-- 等级 -->
            <div class="class">
              <ul class="first">
                <li v-for="(item,index) in select_area" :key="index" :class="{'selected':selected_area == item.code,'sign':selected_street.map(it=>it.areaCode).includes(item.code)}" @click="onAreaSelect(item.code)">{{item.codeValue}}</li>
              </ul>
              <ul class="second">
                <li v-for="(item,index) in streetsOfArea" :key="index" :class="{'selected':selected_street.map(it=>it.code).includes(item.code)}" @click="onStreetSelect(item)">{{item.codeValue}}</li>
              </ul>
            </div>

            <!-- 确认按钮 -->
            <div class="btn">
              <van-button type="primary" text="重置" @click="onResetAreaStreet" />
              <van-button type="primary" text="确定" @click="onAreaStreetConfrim" />
            </div>
          </div>

        </van-dropdown-item>
        <!-- 月薪 -->
        <van-dropdown-item :title="title_monthpay" v-model="select_monthpay_value" :options="select_monthpay" @change="onFilterMonthPayClick" />
        <!-- 筛选 -->
        <van-dropdown-item title="筛选" ref="item_filter">
          <div class="filter">
            <!-- 工作类型 -->
            <div class="box">
              <b>工作类型</b>
              <ul>
                <li :class="{ selected: selected_jobtype.length === 0 }" @click="onFilterJobTypeClick('')">
                  所有
                </li>
                <li v-for="(item, index) in select_jobtype" :key="index" :class="{ selected: selected_jobtype.indexOf(item) >= 0 }" @click="onFilterJobTypeClick(item)">
                  {{ item }}
                </li>
              </ul>
            </div>

            <!-- 工作年限 -->
            <div class="box">
              <b>工作年限</b>
              <ul>
                <li :class="{ selected: selected_workyears.length === 0 }" @click="onFilterWorkyearsClick(null)">
                  所有
                </li>
                <li v-for="(item, index) in select_workyears" :key="index" :class="{
                    selected: selected_workyears.indexOf(item.code) >= 0,
                  }" @click="onFilterWorkyearsClick(item)">
                  {{ item.codeValue }}
                </li>
              </ul>
            </div>

            <!-- 学历要求 -->
            <div class="box">
              <b>学历要求</b>
              <ul>
                <li :class="{ selected: selected_edu.length === 0 }" @click="onFilterEduClick(null)">
                  所有
                </li>
                <li v-for="(item, index) in select_edu" :key="index" :class="{ selected: selected_edu.indexOf(item.code) >= 0 }" @click="onFilterEduClick(item)">
                  {{ item.codeValue }}
                </li>
              </ul>
            </div>

            <!-- 公司福利 -->
            <div class="box">
              <b>公司福利</b>
              <ul>
                <li :class="{ selected: selected_welfare.length === 0 }" @click="onFilterWelfareClick(null)">
                  所有
                </li>
                <li v-for="(item, index) in select_welfare" :key="index" :class="{
                    selected: selected_welfare.indexOf(item.code) >= 0,
                  }" @click="onFilterWelfareClick(item)">
                  {{ item.codeValue }}
                </li>
              </ul>
            </div>
            <!-- 确认按钮 -->
            <div class="btn">
              <van-button type="primary" text="重置" @click="onFilterRest" />
              <van-button type="primary" text="确定" @click="onFilterSubmit('item_filter')" />
            </div>
          </div>
        </van-dropdown-item>
        <!-- 排序 -->
        <van-dropdown-item title="排序" v-model="select_order_value" :options="select_order" @change="onFilterOrderClick" />
      </van-dropdown-menu>
    </van-sticky>
    <!-- 搜索、筛选栏 end -->

    <MyEmpty v-if="jobs.length == 0 && page > 1" />

    <van-list v-else v-model="loading" :finished="finished" finished-text="没有更多了" @load="getPageList" class="job-list">
      <JobShowItem v-for="(item, index) in jobs" :key="index" :item="item" />
    </van-list>
  </div>
</template>

<script>
import JobShowItem from "@/components/person/JobShowItem.vue";
import {
  List,
  Empty,
  Search,
  DropdownMenu,
  Sticky,
  DropdownItem,
  NavBar,
  Button,
} from "vant";

export default {
  name: "SearchResult",
  components: {
    JobShowItem,
    [NavBar.name]: NavBar,
    [List.name]: List,
    [Empty.name]: Empty,
    [Search.name]: Search,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Sticky.name]: Sticky,
    [Button.name]: Button,
  },
  // 定义属性
  data() {
    return {
      title: "职位搜索",
      loading: true,
      finished: false,
      page: 0,
      jobs: [],
      select_street: this.$bd.street,
      selected_street: [{ code: '', codeValue: '全部', areaCode: '' }],
      streetsOfArea: [{ code: '', codeValue: '全部' }],
      select_area: this.$bd.area,
      selected_area: [],
      select_monthpay: [],
      select_monthpay_value: 0,
      select_jobtype: this.$bd.jobType,
      selected_jobtype: [],
      select_edu: this.$bd.edu,
      selected_edu: [],
      select_workyears: this.$bd.workYears,
      selected_workyears: [],
      select_welfare: this.$bd.welfares,
      selected_welfare: [],
      select_order: [
        { text: "发布时间", value: 0 },
        { text: "月薪", value: 1 },
      ],
      select_order_value: 0,
      filter_kw: "",
      filter_monthPayMin: '',
      filter_monthPayMax: '',
      title_monthpay: '月薪',
    };
  },
  mounted() {
    if (this.$route.params.jianzhi == 1) {
      this.selected_jobtype.push('兼职');
    }
		//页面若多次进入，会重复添加，加if判断
		if(this.select_area.findIndex(it=>it.code == '') == -1)
    	this.select_area.splice(0, 0, { code: '', codeValue: '全部' });
		if(this.select_street.findIndex(it=>it.code == '') == -1)
    	this.select_street.splice(0, 0, { areaCode: '', code: '', codeValue: '全部' });
    this.select_monthpay.push({ value: '', text: '所有' });
    this.$bd.monthpay.forEach((item) => {
      this.select_monthpay.push({ value: item.code, text: item.codeValue });
    });
    this.filter_kw = this.$route.params.kw;
    this.getPageList();
  },
  // 方法集合
  methods: {
    //选择地区
    onAreaSelect(code) {
      this.selected_area = code;
      this.streetsOfArea = this.select_street.filter(it => it.areaCode == code);
    },
    //选择街道
    onStreetSelect(street) {
      let index = this.selected_street.findIndex(it => it.code == street.code);
      if (index != -1) {
        this.selected_street.splice(index, 1)
      }
      else {
        this.selected_street.push({ 'code': street.code, 'areaCode': street.areaCode });
      }
			//选择全部，清空其它
			if(street.code == ''){
				this.selected_area = '';
				this.selected_street = [{code:'',areaCode:''}]
			}
			//选择其它，取消全部
			else if(this.selected_street.map(it=>it.code).includes('')){
				// console.log(this.selected_street)
				this.selected_street.splice(0,1);
			}
			else{
				//未选择，默认全部
				if(this.selected_street.length == 0){
					this.selected_area = '';
					this.streetsOfArea = [{ code: '', codeValue: '全部' }];
					this.selected_street = [{ code: '', codeValue: '全部', areaCode: '' }];
				}
			}
    },
    //重置地区和街道
    onResetAreaStreet() {
      this.selected_area = '';
      this.streetsOfArea = [{ code: '', codeValue: '全部' }];
      this.selected_street = [{ 'code': '', 'codeValue': '全部', 'areaCode': '' }];
    },
    //地区街道确认
    onAreaStreetConfrim() {
      this.$refs.item_area.toggle();
      this.page = 0;
      this.getPageList();
    },
    async getPageList() {
      this.loading = true;
      this.finished = false;
      if (this.page === 0) {
        this.jobs = [];
      }
      this.page++;
      var params = {
        pageIndex: this.page,
        pageSize: 50,
        keyword: this.filter_kw,
        areaCode: this.selected_area,
				streetCode:this.selected_street.map(it=>it.code).join(','),
        salaryMin: this.filter_monthPayMin,
        salaryMax: this.filter_monthPayMax,
        jobType: this.selected_jobtype.join(),
        welfaresValCodes: this.selected_welfare.join(),
        eduCode: this.selected_edu.join(),
        workyearsCode: this.selected_workyears.join(),
        orderByField: this.select_order_value
      }
      await this.$api.get('/PersonStation/GetStationPageList', params).then(res => {
        if (res.success) {
          this.loading = false;
          this.jobs = [...this.jobs, ...res.response];
          this.finished = res.response.length == 0;
        }
      })
    },

    resetQuery() {
      this.page = 0;
      this.selected_area = [];
      this.filter_monthPayMin = '';
      this.filter_monthPayMax = '';
      this.select_monthpay_value = 0;
      this.selected_jobtype = [];
      this.selected_welfare = [];
      this.selected_workyears = [];
      this.selected_edu = [];
      this.select_order_value = 0;
      this.getPageList();
    },
    onFilterAreaClick(item) {
      // console.log(item)
      if (item == null) {
        this.selected_area = [];
        return;
      }
      let index = this.selected_area.indexOf(item.code);
      if (index < 0) {
        this.selected_area.push(item.code);
      } else {
        this.selected_area.splice(index, 1);
      }
      if (this.selected_area.length === this.select_area.length) {
        this.selected_area = [];
      }
    },
    onFilterSubmit(type) {
      if (type === "item_area") {
        this.$refs.item_area.toggle();
      } else if (type === "item_filter") {
        this.$refs.item_filter.toggle();
      }
      this.page = 0;
      this.getPageList();
    },
    onFilterMonthPayClick(value) {
      //面议
      if (value == '00') { this.filter_monthPayMin = 0; this.filter_monthPayMax = 0 }
      //无
      else if (value == '01') { this.filter_monthPayMin = -1 }
      //800～1000 1000～1200 1200～1500 1500～2000
      else if (value == '02' || value == '03' || value == '04' || value == '05') { this.filter_monthPayMin = 1; this.filter_monthPayMax = 1 }
      //2000～2500
      else if (value == '06') { this.filter_monthPayMin = 2; this.filter_monthPayMax = 2.5 }
      //2500～3000
      else if (value == '07') { this.filter_monthPayMin = 2.5; this.filter_monthPayMax = 3 }
      //3000～5000
      else if (value == '08') { this.filter_monthPayMin = 3; this.filter_monthPayMax = 5 }
      //5000～8000
      else if (value == '09') { this.filter_monthPayMin = 5; this.filter_monthPayMax = 8 }
      //8000以上
      else if (value == '10') { this.filter_monthPayMin = 8; this.filter_monthPayMax = 50 }
      else { this.filter_monthPayMin = 0; this.filter_monthPayMax = 0; }
      this.title_monthpay = this.select_monthpay.find(item => item.value == value).text
      this.page = 0;
      this.getPageList();
    },
    onFilterJobTypeClick(item) {
      if (item === "") {
        this.selected_jobtype = [];
        return;
      }
      let index = this.selected_jobtype.indexOf(item);
      if (index < 0) {
        this.selected_jobtype.push(item);
      } else {
        this.selected_jobtype.splice(index, 1);
      }
      if (this.selected_jobtype.length === this.select_jobtype.length) {
        this.selected_jobtype = [];
      }
    },
    onFilterEduClick(item) {
      if (item == null) {
        this.selected_edu = [];
        return;
      }
      let index = this.selected_edu.indexOf(item.code);
      if (index < 0) {
        this.selected_edu.push(item.code);
      } else {
        this.selected_edu.splice(index, 1);
      }
      if (this.selected_edu.length === this.select_edu.length) {
        this.selected_edu = [];
      }
    },
    onFilterWorkyearsClick(item) {
      if (item == null) {
        this.selected_workyears = [];
        return;
      }
      let index = this.selected_workyears.indexOf(item.code);
      if (index < 0) {
        this.selected_workyears.push(item.code);
      } else {
        this.selected_workyears.splice(index, 1);
      }
      if (this.selected_workyears.length === this.select_workyears.length) {
        this.selected_workyears = [];
      }
    },
    onFilterWelfareClick(item) {
      if (item == null) {
        this.selected_welfare = [];
        return;
      }
      let index = this.selected_welfare.indexOf(item.code);
      if (index < 0) {
        this.selected_welfare.push(item.code);
      } else {
        this.selected_welfare.splice(index, 1);
      }
      if (this.selected_welfare.length === this.select_welfare.length) {
        this.selected_welfare = [];
      }
    },
    onFilterRest() {
      this.selected_jobtype = [];
      this.selected_welfare = [];
      this.selected_workyears = [];
      this.selected_edu = [];

      this.$refs.item_filter.toggle();
      this.page = 0;
      this.getPageList();
    },
    onFilterOrderClick(code) {
      this.page = 0;
      this.select_order_value = code
      this.getPageList();
    },
    //批量投递
    onClickRight() {
      this.$router.push({
        name: "person-search-result-moreapply",
        params: { filter_kw: this.filter_kw },
      });
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/common.less";

/* 筛选 */
.searchResult .van-dropdown-menu__bar {
  border-bottom: 0.5px solid #ebedf0;
}

.searchResult .van-dropdown-item__content {
  position: absolute !important;
  max-height: 100%;
}

/* 职位列表 */
.searchResult .job-list {
  margin-top: 46px;
}

/* 选择地区 */
.searchResult .area {
  display: flex;
  flex-direction: column;
}

.searchResult .area .class {
  display: flex;
  height: 360px;
  overflow-y: auto;
}

.searchResult .area .first {
  display: flex;
  flex-direction: column;
  flex: 0 0 100px;
  background-color: #f2f2f2;
  overflow-y: scroll;
}

.searchResult .area .first li {
  display: block;
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
  color: #444;
  line-height: 40px;
}

.searchResult .area .first li.selected {
  background-color: #fff;
  color: #333;
  font-weight: 500;
}

.searchResult .area .first li.sign {
  color: #05a6f0;
}

.searchResult .area .second {
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: #fff;
  overflow-y: scroll;
}

.searchResult .area .second li {
  position: relative;
  display: block;
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
  color: #444;
  line-height: 40px;
}

.searchResult .area .second li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 11px;
  height: 11px;
  border: 1px solid #d6d6d6;
  border-radius: 50%;
  margin-top: -7.5px;
}

.searchResult .area .second li.selected {
  color: #333;
  font-weight: 500;
}

.searchResult .area .second li.selected::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 24.5px;
  z-index: 1;
  width: 3px;
  height: 6px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  margin-top: -5px;
  transform: rotate(45deg);
}

.searchResult .area .second li.selected::after {
  border-color: #05a6f0;
  background-color: #05a6f0;
}

.searchResult .area .btn {
  display: flex;
  height: 40px;
  padding: 15px 20px;
  border-top: 0.5px solid #e8e8e8;
  background-color: #fff;
}

.searchResult .area button {
  display: flex;
  justify-content: center;
  flex: 1;
  height: 40px;
  border: none;
  font-size: 16px;
  color: #fff;
  line-height: 40px;
}

.searchResult .area button:nth-child(1) {
  border-radius: 20px 0 0 20px;
  background-color: #19b7ff;
}

.searchResult .area button:nth-child(2) {
  border-radius: 0 20px 20px 0;
  background-color: #05a6f0;
}

/* 筛选条件 */
.searchResult .filter {
  display: flex;
  flex-direction: column;
  padding-bottom: 70px;
}

.searchResult .filter .box {
  display: flex;
  flex-direction: column;
  padding: 20px 15px 10px;
}

.searchResult .filter b {
  margin-bottom: 10px;
  font-size: 17px;
  color: #333;
  line-height: 17px;
  text-indent: 5px;
}

.searchResult .filter ul {
  display: flex;
  flex-wrap: wrap;
}

.searchResult .filter li {
  display: flex;
  justify-content: center;
  width: calc(33.33% - 12px);
  height: 32px;
  border: 1px solid #f9f9f9;
  border-radius: 32px;
  margin: 5px;
  background-color: #f9f9f9;
  font-size: 14px;
  color: #666;
  line-height: 32px;
}

.searchResult .filter li.selected {
  border-color: rgba(5, 166, 240, 0.2);
  background-color: rgba(5, 166, 240, 0.08);
  color: #05a6f0;
  font-weight: 500;
}

.searchResult .filter .btn {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  width: calc(100% - 40px);
  height: 40px;
  padding: 15px 20px;
  background-color: #fff;
}

.searchResult .filter button {
  display: flex;
  justify-content: center;
  flex: 1;
  height: 40px;
  border: none;
  font-size: 16px;
  color: #fff;
  line-height: 40px;
}

.searchResult .filter button:nth-child(1) {
  border-radius: 20px 0 0 20px;
  background-color: #19b7ff;
}

.searchResult .filter button:nth-child(2) {
  border-radius: 0 20px 20px 0;
  background-color: #05a6f0;
}
</style>
